// 1. 装包 yarn add vue-router@3.5.3
// 2. 在main.js 引入 vue-router`    
import VueRouter from 'vue-router'


// 导入组件对象
import Find from '../views/Find.vue'
import Part from '../views/Part.vue'
import My from '../views/My.vue'

import Recommend from '../views/Second/Recommend.vue'
import Ranking from '../views/Second/Ranking.vue'
import SongList from '../views/Second/SongList.vue'

import NotFound from '../views/NotFound.vue'

import Vue from 'vue'

// 3.安装插件
// Vue.use(插件)方法
Vue.use(VueRouter)

// 4.创建路由对象
const routes = [
  {
    // 当匹配到 / 时
    path: '/',
    // 重定向到指定路径
    redirect: '/find'
  },
  // 里面可以写对象
  // 一个对象表示一条路由规则
  // 什么是路由规则?
  // 路径 <==> 组件  映射关系
  {
    name:'find', //路由名称
    path: '/find', // 路径
    component: Find, // 组件对象
     children:[
        // ...省略其他
            {
              path: "recommend",
              component: Recommend
            },
            {
              path: "ranking",
              component: Ranking
            },
            {
              path: "songlist",
              component: SongList
            },
          ]
  },
  {
    name:'my', //路由名称
    path: '/my', // 路径
    component: My // 组件对象
  },
  {
    // 如果需要传递路径参数, 需要在此处配置参数名
    // :name 路径参数名, 不要忘了冒号
    name:'part', //路由名称
    path: '/part/:name', // 路径
    component: Part // 组件对象
  },
  {
    path: '*',
    component: NotFound
  }
]

// b. 指定路由出口 (组件渲染到哪里)
const router = new VueRouter({
  routes,
  // 路由模式: hash(有#) history(没有#, 但需要后端支持)
  // 本地开发用到的服务器是 DevServer
  // 是脚手架提供的一个开发服务器, 这个服务器已经帮我们配好了, 所以可以直接使用
  // 将来项目上线, 不会再使用这个服务器了, 就需要与后端工程师或运维工程师沟通来配合
  mode: 'hash' 
  // 总结: 将来项目上线用什么模式是由产品经理或项目经理决定的, 所以在开发阶段为了不必要的麻烦, 统一使用 hash 模式
  // 如果项目上线真的要改为 history 模式, 则需要后端配合: https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
  // 让后台始终返回一个 index.html
})

export default router

